<template>
  <!-- <el-card
    class="w-full"
    shadow="always"
    :header="t('yin-le-kong-zhi')"
    style="--el-card-padding: 0"
  > -->
  <div class="flex flex-col">
    <el-text tag="b" size="large">{{ t('yin-le-kong-zhi') }}</el-text>
    <div class="grid gap-1 grid-cols-5 grid-rows-2 mt-2">
      <template v-for="(item, index) in buttonList" :key="item.value">
        <el-button
          @click="() => music.onClickMusic(item.value, index)"
          :style="music.changeBtnColor(index)"
        >
          {{ item.content }}
        </el-button>
      </template>
    </div>
    <div class="my-1">
      <el-row :gutter="24" class="w-full">
        <el-col :xs="12" :sm="12" class="text-nowrap overflow-hidden w-12"
          >{{ t('bo-fang-zhuang-tai') }}：{{ music.musicStatus }}</el-col
        >
        <el-col :xs="12" :sm="12" class="text-nowrap overflow-hidden w-12"
          >{{ t('bo-fang-mo-shi') }}：{{ music.musicMode }}</el-col
        >
      </el-row>
      <el-row :gutter="24" class="w-full">
        <el-col :xs="12" :sm="12" class="text-nowrap overflow-hidden w-12"
          >{{ t('yin-liang-zhi') }}：{{ music.musicVolumeValue }}</el-col
        >
        <el-col :xs="12" :sm="12" class="text-nowrap overflow-hidden w-12"
          >{{ t('dang-qian-bo-fang-suo-yin') }}：{{ music.musicIndex }}</el-col
        >
      </el-row>
      <el-row :gutter="24" class="w-full">
        <el-col :xs="24" :sm="24" class="text-nowrap overflow-hidden w-12"
          >{{ t('dang-qian-ge-ming') }}：{{ music.musicName }}</el-col
        >
      </el-row>
      <el-row :gutter="0" class="w-full">
        <el-col :xs="13" :sm="13"
          ><div class="text-nowrap overflow-hidden">
            {{ t('dang-qian-ge-qu-zong-shu') }}：{{ musicList.length }}
          </div></el-col
        >
        <el-col :xs="11" :sm="11">
          <el-dropdown @command="music.handleCommand">
            <div class="text-rose-500">{{ t('shan-chu-yin-le') }}</div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  :command="item.index"
                  v-for="item in deleteMusicList"
                  :key="item.index"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>

    <div class="flex items-center justify-between mb-2">
      <!-- <el-col :xs="8" :sm="8">
            <el-button
              @click="music.onClickMusicList"
              class="w-20"
              
              >{{ t('yin-le-lie-biao') }}</el-button
            > -->
      <!-- <div class="text-nowrap overflow-hidden">{{ t('xuan-ze-yin-le') }}：</div> -->
      <!-- </el-col> -->
      <el-button @click="music.onClickStatus" class="mr-2">{{ t('zhuang-tai-fan-hui') }}</el-button>
      <el-select
        :model-value="music.musicNum"
        :placeholder="t('xuan-ze-yin-pin')"
        @visibleChange="music.visibleChangeMusic"
      >
        <el-option
          :label="item.name"
          :value="item.index"
          v-for="item in musicList"
          :key="item.index"
          @click="music.changeMusic(item.index)"
        >
        </el-option>
      </el-select>
    </div>

    <el-upload
      ref="uploadRef"
      :headers="{ Authorization: getToken() }"
      :action="url"
      :limit="5"
      :auto-upload="false"
      @success="handleSuccess"
      @error="handleError"
      @progress="handleProgress"
    >
      <template #trigger>
        <el-button class="">{{ t('xuan-ze-yin-pin-wen-jian') }}</el-button>
      </template>
      <el-button @click="submitUpload" v-loading="music.isLoading" class="w-20 mx-2">
        {{ t('shang-chuan-yin-pin') }}</el-button
      >
    </el-upload>
  </div>

  <!-- <div class="mt-4" v-if="musicList.length > 0">
      <el-input
        v-model="music.renameValue"
        class="w-full"
        :placeholder="t('qing-shu-ru-wen-jian-ming')"
      >
        <template #prepend>
          <el-select
            :model-value="music.selectName"
            :placeholder="t('xuan-ze-yin-pin')"
            style="width: 8vw"
            @change="(val: string) => music.selectMusicName(val)"
          >
            <el-option
              :label="item.name"
              :value="item.index"
              v-for="item in musicList"
              :key="item.index"
            >
            </el-option>
          </el-select>
        </template>
        <template #append>
          <el-button @click="music.handleReNameEvent" class="mb-2">{{ t('que-ding') }}</el-button>
        </template>
      </el-input>
    </div> -->
  <!-- </el-card> -->
</template>

<script setup lang="ts">
import { useMusicStore } from '@/business/music'
import { uploadRef } from '@/composables/useCarRelevant'
import { deleteMusicList, musicList, musicMessage } from '@/composables/useUpperControl'
import { ElMessage } from '@/stores/elMessage'
import { getToken } from '@/utils'
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
// 国际化
const { t } = useI18n()
const music = useMusicStore()

// 按钮组合
const buttonList = [
  {
    value: 2,
    content: t('bo-fang')
  },
  {
    value: 1,
    content: t('zan-ting')
  },
  {
    value: 0,
    content: t('ting-zhi')
  },
  {
    value: 6,
    content: t('yin-liang-0')
  },
  {
    value: 7,
    content: t('yin-liang-1')
  },
  {
    value: 3,
    content: t('shang-yi-shou')
  },
  {
    value: 4,
    content: t('xia-yi-shou')
  },
  {
    value: 8,
    content: t('shun-xu-bo-fang')
  },
  {
    value: 9,
    content: t('dan-qu-xun-huan')
  },
  {
    value: 10,
    content: t('quan-bu-xun-huan')
  }
]

watch(musicMessage, () => {
  if (musicMessage.value) {
    const { volumeValue, index, mode, name, status } = musicMessage.value
    music.musicVolumeValue = volumeValue
    music.musicIndex = index
    music.musicMode = mode
    music.musicName = name
    music.musicStatus = status
  }
})

const url = `https://${window.location.host}/api/file/patroling/audio/upload`
const submitUpload = () => {
  if (uploadRef.value) {
    uploadRef.value!.submit()
  }
}

interface FileDataType {
  data: []
  message?: string | undefined
  code: number | null
}

const musicResponse = ref<FileDataType>({ data: [], message: '', code: null })
const handleSuccess = (response: { data: []; message?: string; code: number }) => {
  music.isLoading = false // 隐藏加载指示器
  musicResponse.value = response
  if (response && response.message) {
    if (response.code === 500) {
      ElMessage({ type: 'error', message: response.message })
    } else if (response.code === 200) {
      ElMessage({ type: 'success', message: response.message })
      music.onClickMusicList()
    }
  } else {
    if (response.code === 200) {
      ElMessage({
        type: 'success',
        message: t('shang-chuan-cheng-gong-dan-wei-shou-dao-ju-ti-fan-hui-de-xin-xi')
      })
      music.onClickMusicList()
    } else if (response.code === 500) {
      ElMessage({
        type: 'error',
        message: t('shang-chuan-shi-bai-dan-wei-shou-dao-ju-ti-fan-hui-de-xin-xi')
      })
    }
  }

  if (uploadRef.value) {
    uploadRef.value.clearFiles() // 清空上传的文件
  }
}

const handleError = (err: any) => {
  music.isLoading = false // 隐藏加载指示器
  ElMessage({ type: 'error', message: t('shang-chuan-shi-bai') + ':' + err.message })
  if (uploadRef.value) {
    uploadRef.value.clearFiles() // 清空上传的文件
  }
}

const handleProgress = () => {
  music.isLoading = true
}
</script>
<!-- <style scoped lang="scss">
:deep(.el-card__header) {
  padding: 0 0 0 10px;
  font-size: small;
  // border-bottom: none;
}
</style> -->
